{% extends "base_generic.html" %}
{% load static %}

{% block content %}
<div class="jumbotron text-center bg-light rounded-3 p-5 mb-4">
  <h1 class="display-4">欢迎来到本地图书馆</h1>
  <p class="lead">在这里，您可以探索丰富的图书资源，分享阅读体验，发现更多精彩内容。</p>
  {% if not user.is_authenticated %}
  <p>
    <a href="{% url 'login' %}" class="btn btn-primary btn-lg">立即登录</a>
    <a href="#features" class="btn btn-outline-primary btn-lg ms-2">了解更多</a>
  </p>
  {% endif %}
</div>

<div class="row mb-4">
  <div class="col-md-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <i class="fas fa-book fa-3x text-primary mb-3"></i>
        <h3 class="card-title">{{ num_books }}</h3>
        <p class="card-text">馆藏图书</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <i class="fas fa-copy fa-3x text-success mb-3"></i>
        <h3 class="card-title">{{ num_instances }}</h3>
        <p class="card-text">图书副本</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <i class="fas fa-check-circle fa-3x text-info mb-3"></i>
        <h3 class="card-title">{{ num_instances_available }}</h3>
        <p class="card-text">可借副本</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-center h-100">
      <div class="card-body">
        <i class="fas fa-users fa-3x text-warning mb-3"></i>
        <h3 class="card-title">{{ num_authors }}</h3>
        <p class="card-text">入驻作者</p>
      </div>
    </div>
  </div>
</div>

<div id="features" class="row mb-4">
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title"><i class="fas fa-star text-warning"></i> 评分与评论</h5>
        <p class="card-text">为您喜爱的图书打分，分享您的阅读感受，与其他读者交流心得。</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title"><i class="fas fa-heart text-danger"></i> 收藏与关注</h5>
        <p class="card-text">收藏感兴趣的图书，关注喜欢的作者，不错过任何精彩内容。</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title"><i class="fas fa-chart-line text-success"></i> 借阅排行</h5>
        <p class="card-text">实时了解最受欢迎的图书，发现更多优质读物。</p>
      </div>
    </div>
  </div>
</div>

{% if user.is_authenticated %}
<div class="card mb-4">
  <div class="card-body">
    <div class="d-flex align-items-center">
      <i class="fas fa-history fa-2x text-primary me-3"></i>
      <div>
        <h5 class="card-title mb-0">访问统计</h5>
        <p class="card-text">您已经访问本页面 {{ num_visits }} 次</p>
      </div>
    </div>
  </div>
</div>
{% endif %}

<div class="text-center mt-5">
  <h2 class="mb-4">开始探索</h2>
  <div class="row justify-content-center">
    <div class="col-md-2">
      <a href="{% url 'books' %}" class="btn btn-outline-primary btn-lg w-100">
        <i class="fas fa-book mb-2"></i><br>浏览图书
      </a>
    </div>
    <div class="col-md-2">
      <a href="{% url 'authors' %}" class="btn btn-outline-primary btn-lg w-100">
        <i class="fas fa-user-edit mb-2"></i><br>查看作者
      </a>
    </div>
    <div class="col-md-2">
      <a href="{% url 'popular-books' %}" class="btn btn-outline-primary btn-lg w-100">
        <i class="fas fa-fire mb-2"></i><br>热门图书
      </a>
    </div>
  </div>
</div>
{% endblock %}
